<template>
    <div id="albums">
        <div class="album" v-if="albumInfo.album">
            <!-- 专辑信息 -->
            <div class="listInfo">
                <!-- 封面 -->
                <div class="listAvatar">
                    <img :src="albumInfo.album.picUrl + '?param=300y300'" alt="" />
                </div>
                <div class="right">
                    <!-- 标题 -->
                    <div class="title">
                        <div class="titleTag">专辑</div>
                        <div class="titleContent">{{ albumInfo.album.name }}</div>
                    </div>
                    <!-- 操作按钮 -->
                    <div class="buttons">
                        <div class="buttonItem playAll" @click="playAll">
                            <i class="iconfont icon-bofang el-icon-video-play playAll"></i>
                            <span>播放全部</span>
                        </div>
                        <div class="buttonItem" @click="subAlbum">
                            <i class="iconfont icon-xihuan el-icon-star-off" :class="isSub ? 'red' : ''"></i>
                            <span>{{ isSub ? "已收藏" : "收藏" }}</span>
                        </div>
                        <div class="buttonItem">
                            <i class="iconfont icon-zhuanfa"></i>
                            <span>分享</span>
                        </div>
                    </div>
                    <div class="otherInfo">
                        <div class="playCount">
                            歌手 :
                            <span
                                    @click="$router.push({name: 'singerDetail',params:
                                    { id: albumInfo.album.artist.id },})"
                            >{{ albumInfo.album.artist.name }}</span>
                        </div>
                    </div>
                    <div class="otherInfo">
                        <div class="playCount">
                            时间 : {{ albumInfo.album.publishTime | showDate }}
                        </div>
                    </div>
                </div>
            </div>
            <!-- 歌曲列表 -->
            <div class="musicList">
                <el-tabs value="first">
                    <el-tab-pane label="歌曲列表" name="first">
                        <!-- 表格 -->
                        <el-table
                                :data="albumInfo.songs"
                                size="mini"
                                style="width: 100%"
                                @row-dblclick="clickRow"
                                @cell-click="clickCell"
                                highlight-current-row
                                stripe
                        >
                            <el-table-column
                                    label=""
                                    width="35"
                                    type="index"
                                    :index="handleIndex"
                            >
                            </el-table-column>
                            <el-table-column label="" width="23">
                                <!-- 下载按钮 -->
                                <i class="iconfont icon-download el-icon-download"></i>
                            </el-table-column>
                            <el-table-column prop="name" label="音乐标题" min-width="200">
                            </el-table-column>
                            <el-table-column prop="ar[0].name" label="歌手" min-width="100">
                            </el-table-column>
                            <el-table-column prop="al.name" label="专辑" min-width="140">
                            </el-table-column>
                            <el-table-column prop="dt" label="时长" min-width="100">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="评论" name="second">
                        <div class="commentList" v-loading="isCommentLoading">
                            <!-- 精彩评论 -->
                            <comment
                                    :comments="comments.hotComments"
                                    :commentType="'album'"
                                    :commentId="albumInfo.album.id + ''"
                                    @getComment="getAlbumComment"
                                    v-if="comments.hotComments"
                            ><div slot="title">精彩评论</div></comment
                            >
                            <!-- 最新评论 -->
                            <comment
                                    :comments="comments.comments"
                                    :commentType="'album'"
                                    :commentId="albumInfo.album.id + ''"
                                    :isHotComment="comments.hotComments ? false : true"
                                    @getComment="getAlbumComment"
                            ><div slot="title">热门评论</div></comment
                            >
                        </div>
                        <!-- 分页 -->
                        <div class="page" v-if="comments && comments.comments">
                            <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    :total="comments.total"
                                    small
                                    :page-size="50"
                                    :current-page="currentCommentPage"
                                    @current-change="commentPageChange"
                            >
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="专辑详情" name="third">
                        <div class="albumDesc">{{ albumInfo.album.description }}</div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    import { formatDate, handleNum, handleMusicTime } from "@/plugins/utils";
    import Comment from "@/components/comment/Comment.vue";
    export default {
        name: "AlbumsDetail",
        components: {
            Comment,
        },data() {
            return {
                albumInfo: {},
                comments: {},
                // 当前评论页数
                currentCommentPage: 1,
                isSub: false,
                // 评论是否在加载中
                isCommentLoading: false,
            };
        },
        watch: {
            "$store.state.musicId"(current, last) {
                this.handleDOM(current, last);
            },
        },
        methods: {
            // 请求
            // 请求专辑详情
            async getAlbumDetail() {
                let res = await this.$request("album", { id: this.$route.params.id });
                res = res.data;
                // 处理歌曲时间
                res.songs.forEach((item, index) => {
                    res.songs[index].dt = handleMusicTime(item.dt);
                });
                console.log(res);
                this.albumInfo = res;
            },
            // 获取歌单评论
            async getAlbumComment(type) {
                // 获取时间戳
                var timestamp = Date.parse(new Date());
                this.isCommentLoading = true;
                // this.comments.comments = [];
                if (type == "changePage") {
                    let album = document.querySelector(".album");
                    let listInfo = document.querySelector(".listInfo");
                    console.log([listInfo]);
                    album.scrollTo({
                        behavior: "smooth",
                        top: listInfo.clientHeight - 25,
                    });
                }
                let res = await this.$request("/comment/album", {
                    id: this.$route.params.id,
                    offset: (this.currentCommentPage - 1) * 50,
                    limit: 50,
                    timestamp,
                });
                this.isCommentLoading = false;
                if (res.data.code !== 200) {
                    this.$message.error("获取评论失败,请稍后重试!");
                    return;
                }
                // console.log(res);
                this.comments = res.data;
            },
            // 获取已收藏专辑列表并判断用户是否收藏当前专辑
            async getAlbumSublist() {
                let timestamp = Date.parse(new Date());
                let res = await this.$request("/album/sublist", {
                    limit: 1000,
                    timestamp,
                });
                console.log(res);
                this.$store.commit("updateSubAlbumList", res.data.data);
            },

            // 事件函数
            handleIndex(index) {
                // console.log(index);
                index += 1;
                if (index < 10) {
                    return "0" + index;
                } else {
                    return index;
                }
            },

            // 双击table的row的回调
            async clickRow(row) {
                // console.log(row);
                // 将musicId提交到vuex中 供bottomControl查询歌曲url和其它操作
                this.$store.commit("updateMusicId", row.id);
                // 如果歌单发生变化,则提交歌单到vuex
                if (this.albumInfo.album.id != this.$store.state.musicListId) {
                    // 将歌单传到vuex
                    this.$store.commit("updateMusicList", {
                        musicList: this.albumInfo.songs,
                        musicListId: this.albumInfo.album.id,
                    });
                }
            },
            // 点击全部播放按钮的回调
            playAll() {
                this.$store.commit("updateMusicId", this.albumInfo.songs[0].id);
                this.$store.commit("updateMusicList", {
                    musicList: this.albumInfo.songs,
                    musicListId: this.albumInfo.album.id,
                });
            },
            // 评论点击翻页的回调
            commentPageChange(page) {
                this.currentCommentPage = page;
                this.getAlbumComment("changePage");
            },
            // 通过DOM操作样式
            handleDOM(current, last) {
                if (document.querySelector(".album")) {
                    let tableRows = document
                        .querySelector(".album")
                        .querySelectorAll(".el-table__row");
                    // 遍历当前musicList 找到当前播放的index的行进行渲染
                    // console.log(tableRows);
                    let index = this.albumInfo.songs.findIndex(
                        (item) => item.id == current
                    );
                    // console.log(index);
                    if (index != -1) {
                        // 将正在播放的音乐前面的索引换成听歌
                        tableRows[index].children[0].querySelector(
                            ".cell"
                        ).innerHTML = `<div><i class="iconfont icon-yinliang el-icon-headset"></i></div>`;
                        tableRows[index].children[0]
                            .querySelector(".iconfont")
                            .classList.add("currentRow");
                        tableRows[index].children[2]
                            .querySelector(".cell")
                            .classList.add("currentRow");
                    }
                    // 清除上一首的样式
                    if (last != -1) {
                        let lastIndex = this.albumInfo.songs.findIndex(
                            (item) => item.id == last
                        );
                        if (lastIndex != -1) {
                            // 将上一个播放的dom的小喇叭换回索引
                            tableRows[lastIndex].children[0].querySelector(
                                ".cell"
                            ).innerHTML = `<div>${
                                lastIndex + 1 < 10 ? "0" + (lastIndex + 1) : lastIndex + 1
                            }</div>`;

                            // 将上一首的类名删掉  小喇叭的html已经被替换了，不需要再还原
                            tableRows[lastIndex].children[2]
                                .querySelector(".cell")
                                .classList.remove("currentRow");
                        }
                    }
                }
            },

            // 点击收藏专辑的回调
            async subAlbum() {
                this.isSub = !this.isSub;
                await this.$request("/album/sub", {
                    id: this.$route.params.id,
                    t: this.isSub ? 1 : 0,
                });
                this.getAlbumSublist();
            },

            // 判断用户是否收藏了该专辑

            // 点击单元格的回调
            async clickCell(row, column, cell) {
                // 判断点击的是下载按钮
                if (cell.querySelector(".icon-download")) {
                    // 请求该歌曲的url
                    console.log(row);
                    let res = await this.$request("/song/url", { id: row.id });
                    console.log(res);
                    if (res.data.data[0].url == null) {
                        this.$message.warning("暂时无法获取该资源哦!");
                        return;
                    }

                    // 匹配资源的域名
                    let url = res.data.data[0].url.match(/http.*?\.net/);
                    // 匹配域名名称，并匹配对应的代理
                    let serve = url[0].match(/http:\/(\S*).music/)[1];
                    if (
                        serve != "/m7" &&
                        serve != "/m701" &&
                        serve != "/m8" &&
                        serve != "/m801"
                    ) {
                        // 没有对应的代理
                        this.$message.error("匹配不到对应的代理,下载失败!");
                        return;
                    }
                    // 截取后面的参数
                    let params = res.data.data[0].url.slice(url[0].length);
                    // console.log(url[0], serve, params);

                    let downloadMusicInfo = {
                        url: serve + params,
                        name:
                            row.name +
                            " - " +
                            row.ar[0].name +
                            "." +
                            res.data.data[0].type.toLowerCase(),
                    };
                    console.log(downloadMusicInfo);
                    this.$store.commit("updateDownloadMusicInfo", downloadMusicInfo);
                }
            },
        },
        filters: {
            showDate(value) {
                // 1、先将时间戳转成Date对象
                const date = new Date(value);

                // 2、将date进行格式化
                return formatDate(date, "yyyy-MM-dd");
            },
            handleNum,
        },
        created() {
            this.getAlbumComment();
        },
        async mounted() {
            await this.getAlbumDetail();
            this.$nextTick(() => {
                // 判断是否和上一次打开的歌单相同
                if (this.$route.params.id == this.$store.state.musicListId) {
                    this.handleDOM(this.$store.state.musicId);
                }
            });

        },
    };
</script>

<style scoped>
    #albums{
        background-color: #f7f7f7;
    }
    .album {
        height: calc(80vh - 105px);
        overflow-y: hidden;
        width: 900px;
        height: 100%;
        margin: auto;
        border-left: 1px #cccccc solid;
        border-right: 1px #cccccc solid;
        background-color: white;
    }

    .listInfo {
        display: flex;
        padding: 25px 15px;
        align-items: center;
    }

    .listAvatar {
        width: 150px;
        height: 150px;
        overflow: hidden;
        border-radius: 10px;
        margin-right: 15px;
    }

    .listAvatar img {
        width: 100%;
    }

    .right {
        width: calc(100% - 200px);
    }

    .title {
        display: flex;
        align-items: center;
    }

    .titleTag {
        font-size: 12px;
        color: #ec4141;
        border: 1px solid #ec4141;
        padding: 1px 2px;
        border-radius: 2px;
        margin-right: 5px;
        transform: scale(0.8);
    }

    .titleContent {
        font-size: 20px;
        font-weight: 600;
        color: #373737;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 90%;
    }

    .createTime {
        transform: scale(0.9);
    }

    .buttons {
        margin: 8px 0 0 -5px;
        display: flex;
    }

    .buttonItem {
        font-size: 12px;
        padding: 8px 15px;
        border: 1px solid #ddd;
        border-radius: 20px;
        transform: scale(0.9);
    }

    .buttonItem i {
        font-size: 12px;
        margin-right: 3px;
        transform: scale(0.9);
    }

    .playAll {
        background-color: #40E0D0;
        color: white;
    }

    .otherInfo {
        margin: 5px 0 0 -30px;
        display: flex;
        font-size: 12px;
        transform: scale(0.9);
    }

    .musicNum {
        margin-right: 13px;
    }

    .musicList {
        margin: -15px 15px 0;
    }

    .page {
        width: 100%;
        text-align: center;
        padding-bottom: 20px;
    }

    .albumDesc {
        font-size: 12px;
        color: #373737;
        line-height: 25px;
        letter-spacing: 0.5px;
        text-indent: 2em;
    }

    .red {
        color: #40E0D0;
    }

    .album /deep/ .el-loading-spinner {
        top: 40px;
    }

    .playCount span {
        cursor: pointer;
    }
    /deep/ .el-pagination {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
</style>